<template>
<el-card class="question-bank-panel">
          <template #header>
            <div class="panel-header">
              <span><img width="32" height="32" src="/images/edu/question-bank.png">题库总览</span>
              <div class="total-stats">
                <el-statistic title="总题量" :value="totalQuestions" />
                <el-statistic title="参与人数" :value="totalParticipants" />
                <el-statistic title="平均正确率" :value="averageAccuracy" suffix="%" />
              </div>
            </div>
          </template>

          <div class="category-grid">
            <div v-for="category in questionBankItems" :key="category.id" class="category-card"
              @click="viewCategory(category.id)">
              <div class="card-header">
                <el-tag type="info" effect="dark">{{ category.field }}</el-tag>
                <div class="update-info">
                  <el-icon>
                    <Clock />
                  </el-icon>
                  最近更新：{{ category.lastUpdate }}
                </div>
              </div>

              <h4 class="category-title">{{ category.name }}</h4>

              <div class="progress-group">
                <div class="progress-item">
                  <span>题目总量</span>
                  <el-progress :percentage="(category.questionCount / maxQuestions) * 100" :show-text="false"
                    color="#409EFF" />
                  <span class="progress-value">{{ category.questionCount }}题</span>
                </div>

                <div class="progress-item">
                  <span>参与练习</span>
                  <el-progress :percentage="(category.participants / maxParticipants) * 100" :show-text="false"
                    color="#67C23A" />
                  <span class="progress-value">{{ category.participants }}人</span>
                </div>
              </div>

              <div class="meta-stats">
                <div class="stat-item">
                  <el-icon>
                    <Trophy />
                  </el-icon>
                  最高正确率：{{ category.topAccuracy }}%
                </div>
                <div class="stat-item">
                  <el-icon>
                    <DataAnalysis />
                  </el-icon>
                  难度分布：
                  <span title="简单" class="difficulty easy">{{ category.difficulty.easy }}%</span>
                  <span title="中等" class="difficulty medium">{{ category.difficulty.medium }}%</span>
                  <span title="困难" class="difficulty hard">{{ category.difficulty.hard }}%</span>
                </div>
              </div>
            </div>
          </div>
        </el-card>
</template>
<script setup lang="ts">
import { ref,computed,watch } from 'vue'

  const props = defineProps({
    questionBankItems: {
      type: Array,
      required: true
    },
    loading: {
      type: Boolean,
      default: true
    }
  })

 // 题库数量
  const maxQuestions = ref(0)
  // 参与人数
  const maxParticipants = ref(0)

// 监听器

// 统计量状态
const totalQuestions = ref(0)
const totalParticipants = ref(0)
const averageAccuracy = ref('0.0')

// 监听数据变化
watch(
  () => props.questionBankItems,
  (newVal) => {
  // 计算最大值用于进度条
 maxQuestions.value = Math.max(...newVal.map(c => c.questionCount))
 maxParticipants.value = Math.max(...newVal.map(c => c.participants))


    totalQuestions.value = newVal.reduce((sum, c) => sum + c.questionCount, 0)
    totalParticipants.value = newVal.reduce((sum, c) => sum + c.participants, 0)
    averageAccuracy.value = newVal.length > 0 
      ? (newVal.reduce((sum, c) => sum + c.topAccuracy, 0) / newVal.length).toFixed(1)
      : '0.0'
  },
  { immediate: true, deep: true }
)

</script>

<style lang="scss" scoped>
// 题库总览样式 start
.question-bank-panel {
  border-radius: 12px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

  :deep(.el-card__header) {
    padding: 24px;
  }

  .panel-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 18px;
      font-weight: 600;
      color: #303133;
    img {
      vertical-align: middle;
      margin-right: 8px;
    }

    .total-stats {
      display: flex;
      gap: 40px;

      .el-statistic {
        text-align: center;

        :deep(.el-statistic__head) {
          font-size: 14px;
          color: #909399;
          margin-bottom: 8px;
        }

        :deep(.el-statistic__content) {
          font-size: 24px;
          font-weight: 600;
          color: #409EFF;
        }
      }
    }
  }

  .category-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 0;
    padding: 0;
  }

  .category-card {
    background: #fff;
    border-radius: 8px;
    padding: 20px;
    border: 1px solid #ebeef5;
    transition: all 0.3s ease;
    cursor: pointer;

    &:hover {
      transform: translateY(-3px);
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1);
    }

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 16px;

      .update-info {
        font-size: 12px;
        color: #909399;
        display: flex;
        align-items: center;
        gap: 4px;
      }
    }

    .category-title {
      margin: 0 0 20px;
      font-size: 16px;
      color: #303133;
    }

    .progress-group {
      margin-bottom: 20px;

      .progress-item {
        margin-bottom: 12px;

        span:first-child {
          display: block;
          font-size: 12px;
          color: #909399;
          margin-bottom: 4px;
        }

        .el-progress {
          display: inline-block;
          width: 70%;
          margin-right: 10px;
        }

        .progress-value {
          float: right;
          font-weight: 500;
          color: #409EFF;
        }
      }
    }

    .meta-stats {
      border-top: 1px solid #f5f7fa;
      padding-top: 16px;

      .stat-item {
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 12px;
        color: #606266;
        margin-bottom: 8px;

        .difficulty {
          margin-left: 8px;
          padding: 2px 6px;
          border-radius: 4px;

          &.easy {
            background: #f0f9eb;
            color: #67c23a;
          }

          &.medium {
            background: #fdf6ec;
            color: #e6a23c;
          }

          &.hard {
            background: #fef0f0;
            color: #f56c6c;
          }
        }
      }
    }
  }
}

// 题库总览样式 end
</style>